import React , { useState }from "react";
import {
    Input,
    InputGroup,
    Stack,
    Button,
    FormControl,
    Flex,
    Menu,
    MenuList,
    MenuButton,
    MenuItem,
    Checkbox,
    Box,
    InputLeftElement,
    useToast
} from "@chakra-ui/react";
import { FaUserAlt, FaLock } from "react-icons/fa";
import { Form, Formik, Field,  } from 'formik'
import * as Yup from 'yup'
import { signIn } from '../services/login'


const Login = () => {
    const [loading, setLoading] = useState(false)
    const toast = useToast({status: "error", position: "top"})
    const validateSchema = Yup.object({
        username: Yup.string().required('请输入用户名'),
        password: Yup.string().min(6, '密码长度不能小于6').required('请输入密码'),
    })
    const user = {
        username: '',
        password: ''
    }
 
    const handleValidate = async values => {
        try {
          await validateSchema.validate(values)
          return true
        } catch (error) {
          toast({ description: error.message })
          return false
        }  
      }
      // 表单提交
      const handleSubmit = async (values) => {
        const valid = await handleValidate(values)
        if(!valid) return
        setLoading(true)
        const { data } = await signIn(values)
        setLoading(false)
        console.log(data)
      }
    return (
        <Box fontSize="sm" color="gray.600">
            <Formik
                initialValues={user}
                onSubmit={handleSubmit}
            >

                <Form>
                    <Stack spacing="2">
                        <Field name="username">
                            {({ field, form }) => (
                                <FormControl>
                                    <InputGroup>
                                        <InputLeftElement
                                            pointerEvents="none"
                                            children={<FaUserAlt color="gray.300" />}
                                        />
                                        <Input {...field} type="tel" id="username" placeholder="请输入用户名" />
                                    </InputGroup>
                                </FormControl>
                            )}
                        </Field>
                        <Field name="password">
                            {({ field, form }) => (
                                <FormControl>
                                    <InputGroup>
                                        <InputLeftElement
                                            pointerEvents="none"
                                            children={<FaLock color="gray.300" />}
                                        />
                                        <Input {...field} type="password" id="password" placeholder="请输入密码" />
                                    </InputGroup>
                                </FormControl>
                            )}
                        </Field>
                        <Flex as="span" justify="space-between" mt="20px">
                            <Checkbox defaultChecked>记住我</Checkbox>
                            <Menu placement="bottom-end">
                                <MenuButton as="a" color='gray.50'>
                                    登录遇到问题?
                                </MenuButton>
                                <MenuList>
                                    <MenuItem>用手机号重置密码</MenuItem>
                                    <MenuItem>用邮箱重置密码</MenuItem>
                                    <MenuItem>无法用海外手机号登录</MenuItem>
                                    <MenuItem>无法用Google账号登录</MenuItem>
                                </MenuList>
                            </Menu>
                        </Flex>
                        <Button isLoading={loading} type="submit" mt="20px" w="100%" h="44px" colorScheme="blue" borderRadius="22px" >登录</Button>
                    </Stack>
                </Form>
            </Formik>
        </Box>
    )
}

export default Login